<template>
  <div class="operation">
    <div class="operation-search">
      <a-form layout="inline">
        <a-form-item label="查找">
          <a-input
            placeholder="输入后按下回车搜索"
            v-model="searchItem.KeyWords"
            @keyup.enter.native="searchstdoperationList()"
          />
        </a-form-item>
        <a-form-item>
          <general-button
            @operation="addProcedure"
            btnText="添加工序"
            btnPowerNum="1FFE1A59-8339-46D0-B7F5-BC103BE21657"
          ></general-button>
        </a-form-item>
        <a-form-item>
          <general-button
            @operation="downloadProcedureFun"
            btnText="下载工序模板"
            btnPowerNum="1FFE1A59-8339-46D0-B7F5-BC103BE21657"
          ></general-button>
        </a-form-item>
        <a-form-item>
          <general-button
            @operation="importProcedureFun"
            btnText="导入工序模板"
            btnPowerNum="1FFE1A59-8339-46D0-B7F5-BC103BE21657"
          ></general-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-box">
      <div class="operation-table" id="OperationManageID">
        <div class="operation-table-box">
          <a-table
            className="components-table-demo-nested"
            :columns="columns"
            :row-key="(record) => record.StdOperationID"
            :data-source="procedureData"
            :loading="loading"
            :scroll="{ y: procedurescrollY }"
            :pagination="false"
            size="middle"
            :customRow="rowClick"
          >
            <template slot="name" slot-scope="name">
              {{ name }}
            </template>
            <template slot="action" slot-scope="text, record">
              <div class="chart-manage">
                <a-icon
                  type="edit"
                  class="icon-class"
                  @click="procedureeditFun(record)"
                />
                <a-icon
                  type="delete"
                  class="icon-class"
                  @click="proceduredelFun(record)"
                />
              </div>
            </template>
          </a-table>
        </div>
        <div class="table-paging">
          <a-pagination
            show-size-changer
            :default-current="1"
            :total="procedureTotal"
            @change="procedureChange"
            @showSizeChange="onShowSizeChange"
          />
        </div>
      </div>
      <div class="workunit-table" id="workSetTable">
        <div class="navigation-bottom">
          <div
            :class="[
              'tabs-box',
              item.type == bottomtabsInfo.type ? 'active' : '',
            ]"
            v-for="item in bottomTabsList"
            :key="item.type"
            @click="bottomtabsFun(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <component
          :is="bottomtabsInfo.cName"
          @modalFun="belowcommunalFun"
          :ref="bottomtabsInfo.cName"
          :workSetScrollY="workSetScrollY"
          :data="workSetData"
          :item="procedureInfo"
          @updata="upWrokset"
        />
      </div>
    </div>

    <initial-form
      :show.sync="procedureShow"
      :isEdit="procedureisEdit"
      :reviseForm="procedureInfo"
      @break="GetStdOperationListFun()"
    ></initial-form>

    <!-- 文件上传 -->
    <file-form
      :show.sync="procedureMouldShow"
      @upList="searchstdoperationList"
    ></file-form>
    <association-proce
      :show.sync="associationShow"
      :item="procedureInfo"
      @updata="upWrokset"
    ></association-proce>
  </div>
</template>

<script>
import moment from "moment";
import { getTableScroll } from "@/common/table-calc";
// import ProcedureForm from "./children/procedure-form.vue";
import initialForm from "./children/initial-form.vue";
import {
  getStdOperationList,
  delStdOperation,
  stdOperationTemplateDownload,
  getStdOperationListToStdOperationID,
} from "@/api/StdOperation/index";
import GeneralButton from "@/components/be-current-btn.vue";
import AssociationProce from "./children/association-procedure.vue"; //工序关联工作集
import FileForm from "./children/file-form.vue";
import WorkSetTable from "./tablelist/work-set-table.vue";
//工序列表
const columns = [
  {
    title: "序号",
    dataIndex: "num",
    width: "10%",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "StdOperationName",
    sorter: true,
    width: "20%",
    scopedSlots: { customRender: "name" },
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "StdOperationDesc",
    width: "20%",
    align: "center",
  },
  {
    title: "编辑时间",
    dataIndex: "ModifyDt",
    width: "20%",
    align: "center",
  },
  {
    title: "编辑人",
    dataIndex: "ModifyUserName",
    width: "20%",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "10%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "OperationManage",
  components: {
    // ProcedureForm,
    initialForm,
    GeneralButton,
    AssociationProce,
    FileForm,
    WorkSetTable,
  },
  data() {
    return {
      bottomtabsInfo: {
        name: "工作集",
        type: 2,
        cName: "WorkSetTable",
        clickName: "procedureAssociationFun",
      }, //下方选中信息
      bottomTabsList: [
        {
          name: "工作集",
          type: 2,
          cName: "WorkSetTable",
          clickName: "procedureAssociationFun",
        },
      ], //下方Tab列表

      procedureInfo: {}, //新增删除工序信息
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 10,
        },
        KeyWords: "",
      }, //搜索
      procedureTotal: 0,
      procedureMouldShow: false, //工序模板导入
      associationShow: false, //工序关联工作集显示
      loading: true, //表格loading
      columns, //工序列表表头
      procedurescrollY: 0, //动态计算表格高度
      workSetScrollY: 0, //工序关联工作集表格高度
      procedureShow: false, //添加工序
      procedureisEdit: false, //判断是添加还是修改
      procedureData: [], //工序列表
      workSetData: [], //工序关联工作集列表信息
    };
  },
  methods: {
    /* 更新下方工作集 */
    async upWrokset() {
      let { StdOperationID } = this.procedureInfo;
      let res = await getStdOperationListToStdOperationID({ StdOperationID });
      res.Data.map((item, index) => (item.num = index + 1));
      this.workSetData = res.Data;
    },
    //查询关联工作集
    /**
     * 点击表格行触发
     * @param {Object} record - 行数据
     * @param {Number} index - 索引值
     * @return Function
     */
    rowClick: function (record, index) {
      return {
        style: {
          //  设置行背景色
          "background-color":
            record.StdOperationID === this.procedureInfo.StdOperationID
              ? "#E6F7FF"
              : "",
        },
        on: {
          click: async () => {
            this.procedureInfo = record;
            let { StdOperationID } = record;
            let res = await getStdOperationListToStdOperationID({
              StdOperationID,
            });
            res.Data.map((item, index) => (item.num = index + 1));
            this.workSetData = res.Data;
          },

          // ...
        },
      };
    },
    //下方组件方法
    belowcommunalFun(value) {
      this[this.bottomtabsInfo.clickName](value);
    },

    //下载工序模板
    async downloadProcedureFun() {
      let res = await stdOperationTemplateDownload();

      var raw = window.atob(res.Data.File);
      var uInt8Array = new Uint8Array(raw.length);
      for (var i = 0; i < raw.length; i++) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      const blob = new Blob([uInt8Array], {
        type: "application/vnd.ms-exce",
      });
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.download = `工序模板${moment().format("YYYY-MM-DD HH:mm:ss")}.xls`;
      document.body.appendChild(link);
      link.click();
    },

    //导入工序模板
    importProcedureFun() {
      this.procedureMouldShow = true;
    },
    //获取工序列表
    async GetStdOperationListFun() {
      const res = await getStdOperationList(this.searchItem);
      this.procedureData = res.Data.Data;
      this.procedureTotal = res.Data.TotalNumber;
      this.loading = false;
      this.procedureData.map((item, index) => {
        item.num = index + 1;
        if (item.ModifyDt != null) {
          item.ModifyDt = moment(item.ModifyDt).format("YYYY-MM-DD HH:mm:ss");
        }
      });
    },
    //查询
    searchstdoperationList() {
      this.searchItem.pageRequestModel.pageIndex = 1;
      this.GetStdOperationListFun();
    },

    //添加工序
    addProcedure() {
      this.procedureInfo = {};
      this.procedureisEdit = false;
      this.procedureShow = true;
    },
    //修改工序
    procedureeditFun(item) {
      if (!this.hasPermission("9352BFEE-B697-422C-9631-7182B2266F56")) return;
      this.procedureInfo = JSON.parse(JSON.stringify(item));
      this.procedureShow = true;
      this.procedureisEdit = true;
    },
    //工序关联工作集
    procedureAssociationFun(value) {
      if (!this.hasPermission("9352BFEE-B697-422C-9631-7182B2266F56")) return;
      this.procedureInfo = value.data;
      this.associationShow = value.show;
    },
    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.GetStdOperationListFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.GetStdOperationListFun();
    },
    //删除工序
    proceduredelFun(item) {
      if (!this.hasPermission("FDB28200-A508-4A89-9CC0-2CA485E73B47")) return;
      delete item.num;
      const that = this;
      this.$confirm({
        title: `确认要删除【${item.StdOperationName}】嘛？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await delStdOperation([item]);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.GetStdOperationListFun();
          } else {
            that.$message.info(res.Data);
          }
        },
        onCancel() {},
      });
    },
  },
  created() {
    this.GetStdOperationListFun();
  },
  updated() {
    this.$nextTick(() => {
      this.procedurescrollY = getTableScroll(58, "OperationManageID");
      this.workSetScrollY = getTableScroll(58, "workSetTable");
    });
  },
};
</script>

<style lang="less" scoped>
.operation {
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .operation-search {
    display: flex;
    justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    margin-bottom: 0.9375rem;
  }

  .table-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;

    .operation-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 50%;
      margin-bottom: 0.3125rem;
      // 移除外层容器的overflow: auto

      .operation-table-box {
        height: 100%;
        flex: 1;
        max-height: 400px; /* 限制最大高度防止溢出 */
        overflow-y: auto; /* 超出内容显示垂直滚动条 */
      }
    }

    .workunit-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 0.625rem;
      height: 50%;
      max-height: 40vh; /* 限制最大高度为视口高度的50% */
      overflow-y: auto; /* 内容超出时显示垂直滚动条 */
      // 移除外层容器的overflow: auto

      /deep/ .ant-table-wrapper {
        // 深度选择器穿透到子组件
        flex: 1;
      }
    }
  }
}

.table-paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.625rem;
}

//表格滚动条
</style>